Angular-এ Flex Layout লাইব্রেরি ব্যবহার করে সহজেই রেসপনসিভ লেআউট তৈরি করা যায়। Flex Layout একটি শক্তিশালী টুল যা CSS Flexbox এর উপর ভিত্তি করে তৈরি, এবং Angular অ্যাপ্লিকেশনগুলিতে রেসপনসিভ এবং ডাইনামিক লেআউট ডিজাইন করতে সহায়ক। এটি ফ্লেক্সবক্সের সুবিধাগুলোকে Angular অ্যাপ্লিকেশনের টেমপ্লেটে ব্যবহারযোগ্য করে তোলে।

Flex Layout কি?

Flex Layout হল একটি Angular মডিউল, যা ফ্লেক্সবক্সের উপর ভিত্তি করে HTML উপাদানগুলোর অবস্থান ও আকার পরিবর্তন করতে সহায়ক। এর মাধ্যমে আপনি সহজেই বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির প্রস্থ, উচ্চতা, অ্যালাইনমেন্ট, ডিসপ্লে এবং অর্ডার ম্যানেজ করতে পারেন। এটি মোবাইল-ফার্স্ট (mobile-first) ডিজাইনে বিশেষভাবে উপকারী, কারণ এটি রেসপনসিভ ডিজাইন তৈরি করার জন্য অনেক সুবিধা প্রদান করে।

Flex Layout ইনস্টলেশন

Flex Layout ব্যবহার করতে হলে প্রথমে আপনাকে এটি আপনার Angular প্রজেক্টে ইনস্টল করতে হবে।

1. Flex Layout ইনস্টল করা

npm install @angular/flex-layout

2. FlexLayoutModule ইমপোর্ট করা

এরপর, আপনাকে FlexLayoutModule আপনার অ্যাপ মডিউলে ইমপোর্ট করতে হবে।

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule
  ]
})
export class AppModule { }

এখন আপনি Flex Layout এর ডিরেকটিভস আপনার কম্পোনেন্টের টেমপ্লেটে ব্যবহার করতে পারবেন।

Flex Layout এর মূল ডিরেকটিভস

Flex Layout লাইব্রেরি বেশ কিছু গুরুত্বপূর্ণ ডিরেকটিভ প্রদান করে যা ফ্লেক্সবক্সের কার্যকারিতা Angular টেমপ্লেটে যুক্ত করে। এখানে কিছু গুরুত্বপূর্ণ ডিরেকটিভের উদাহরণ দেওয়া হল:

1. fxLayout: এটি ফ্লেক্স কন্টেইনার তৈরি করে এবং এর মাধ্যমে আপনি কন্টেইনারের দিক (হরিজেন্টাল বা ভারটিকাল) নির্ধারণ করতে পারেন।
2. fxLayoutAlign: এটি কন্টেইনারের ভিতরের উপাদানগুলির অ্যালাইনমেন্ট কন্ট্রোল করে।
3. fxFlex: এটি ফ্লেক্স আইটেমের আকার নির্ধারণ করে, অর্থাৎ উপাদানটি কন্টেইনারের মধ্যে কতটুকু জায়গা নেবে।
4. fxShow / fxHide: এগুলি রেসপনসিভ ডিজাইনে নির্দিষ্ট স্ক্রীন সাইজে উপাদানগুলো দেখানো বা লুকানো যায়।

উদাহরণ: Flex Layout দিয়ে রেসপনসিভ লেআউট

এখানে আমরা একটি রেসপনসিভ লেআউট তৈরি করব, যেখানে ফ্লেক্স কন্টেইনারের মধ্যে কয়েকটি উপাদান থাকবে। এই উপাদানগুলো স্ক্রীন সাইজ অনুসারে সজ্জিত হবে।

1. কম্পোনেন্ট টেমপ্লেট

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center center">
  <div fxFlex="25%" class="box">Box 1</div>
  <div fxFlex="25%" class="box">Box 2</div>
  <div fxFlex="25%" class="box">Box 3</div>
</div>

2. CSS স্টাইল

.box {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

3. রেসপনসিভ কন্ডিশন যোগ করা

Flex Layout এর মাধ্যমে রেসপনসিভ ডিজাইন সহজেই করা যায়। এটি fxLayout এবং fxFlex ডিরেকটিভের মাধ্যমে বিভিন্ন স্ক্রীন সাইজে উপাদানগুলির অবস্থান এবং আকার পরিবর্তন করতে সাহায্য করে।

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="center center">
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 1
  </div>
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 2
  </div>
  <div fxFlex="100%" fxFlex.xs="50%" fxFlex.sm="33%" fxFlex.md="25%" class="box">
    Box 3
  </div>
</div>

এখানে, আমরা:

• fxFlex="100%" সেট করেছি যেটি ডিফল্ট হয়ে থাকবে (যখন স্ক্রীন সাইজ ছোট হবে)।
• fxFlex.xs="50%" এবং fxFlex.sm="33%" সেট করা হয়েছে, যার মাধ্যমে ছোট স্ক্রীনে উপাদানগুলো 50% প্রস্থ নেবে এবং স্মল স্ক্রীনে 33% প্রস্থ নেবে।
• fxFlex.md="25%" সেট করা হয়েছে, যার মাধ্যমে মিডিয়াম স্ক্রীনে প্রতিটি বক্স 25% প্রস্থ নিবে।

অন্যান্য উপকারিতা

1. অবজেক্ট অ্যালাইনমেন্ট: fxLayoutAlign ব্যবহার করে উপাদানগুলির অ্যালাইনমেন্ট করা যায়, যেমন fxLayoutAlign="start center" বা fxLayoutAlign="center end"।
2. আইটেম অর্ডার: Flex Layout ডিরেকটিভের মাধ্যমে আপনি আইটেমগুলোর অর্ডারও নির্ধারণ করতে পারেন, যেমন fxFlexOrder="2"।
3. ডিভাইস অনুসারে শো বা হাইড: fxShow এবং fxHide ডিরেকটিভ ব্যবহার করে রেসপনসিভ ডিজাইনে নির্দিষ্ট স্ক্রীন সাইজে উপাদানগুলো দেখানো বা লুকানো যায়।

<div fxLayout="row">
  <div fxFlex="50%" fxShow.xs="false" fxShow.md="true" class="box">Visible on Medium+</div>
  <div fxFlex="50%" fxHide.xs="false" fxHide.md="true" class="box">Visible on Small</div>
</div>

উপসংহার

Angular Flex Layout একটি খুবই শক্তিশালী টুল যা আপনাকে রেসপনসিভ ডিজাইন তৈরির জন্য Flexbox এর সুবিধা প্রদান করে। এটি দ্রুত এবং কার্যকরীভাবে লেআউট তৈরি করতে সহায়ক, বিশেষ করে যখন আপনার অ্যাপ্লিকেশনটি বিভিন্ন স্ক্রীন সাইজে কাজ করবে। fxLayout, fxFlex, এবং fxLayoutAlign এর মাধ্যমে আপনি একাধিক ডিভাইসে উপাদানগুলির অবস্থান, আকার, এবং অ্যালাইনমেন্ট সহজেই কনফিগার করতে পারেন।